<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../js/topfoot.js"></script>
    <link rel="stylesheet" href="../css/titlebanner.css">
    <link rel="stylesheet" href="../css/product.css">

</head>
<script>
    $(function () {
        getPageData();
        setTab();
    });

    function getCookStyle(data) {
        return '<div>' + data + '</div>';
    }

    function getPageData() {
        let data1 = myAjax("product", "", "get");
        let htmltab = '';
        let allHtml = '';
        for (let j = 0; j < data1.length; j++) {
            let data = data1[j].list;
            if (data.length !== 0) {
                htmltab += getCookStyle(data1[j].name);
                let html = '';
                html += '<div class="pro-box" id="product-' + j + '">';
                for (let i = 0; i < data.length; i++) {
                    html += '<div class="pro-box-block">\n' +
                        '                <a href="javascript:getProductDetailId(' + data[i].id + ')">\n' +
                        '                    <div><img src="' + data[i].imgUrl + '" height="300" width="300"/></div>\n' +
                        '                </a>\n' +
                        '                <a href="javascript:getProductDetailId(' + data[i].id + ')"><h5>' + data[i].name + '</h5></a>\n' +
                        '                <div>\n' +
                        '                    <span>价格：</span><span>' + data[i].price + '</span>\n' +
                        '                </div>\n' +
                        '                <a href="javascript:getProductDetailId(' + data[i].id + ')">\n' +
                        '                    <div>' + data[i].content + '</div>\n' +
                        '                </a>\n' +
                        '            </div>';
                }
                html += '</div>';
                $("#products" + j).html(html);
                allHtml += html;
            }
        }
        $("#detail-cook-style").html(htmltab);
        $("#products").html(allHtml + "<div></div>");
    }

    function getProductDetailId(id) {
        sessionStorage.setItem("productId", id);
        window.open("/html/product-detail.html");
    }

    function setTab() {
        $("#products").find(".pro-box:first").show();   //为每个BOX的第一个元素显示
        $("#detail-cook-style div").on("mouseover", function () { //给div标签添加事件
            let index = $(this).index();  //获取当前div标签的个数
            $("#products").find(".pro-box").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示
            $(this).addClass("hovera").siblings().removeClass("hovera"); //div标签显示，同辈元素隐藏
        });
    }

</script>
<body>

<div id="tophtml"></div>
<div class="content">
    <div class="title-banner">
        <div>产品展示</div>
        <div id="detail-cook-style">
            <!--            <div>川菜</div>-->
            <!--            <div>粤菜</div>-->
            <!--            <div>湘菜</div>-->
            <!--            <div>鲁菜</div>-->
            <!--            <div>闽菜</div>-->
            <!--            <div>鄂菜</div>-->
        </div>
    </div>

    <div class="product-show">
        <div class="product-center" id="products">

            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>-->
            <!--                </a>-->
            <!--                <a href="product-detail.html"><h5>香芋扣肉香芋扣肉香芋扣肉香芋扣肉</h5></a>-->
            <!--                <div>-->
            <!--                    <span>价格：</span><span>4:00</span>-->
            <!--                </div>-->
            <!--                <a href="product-detail.html">-->
            <!--                    <div>原料：猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适猪五花肉500克，芋头400克，青菜适量</div>-->
            <!--                </a>-->
            <!--            </div>-->
            <!--        </div>-->
        </div>

    </div>
</div>
<div id="foothtml"></div>
</body>
</html>